
.siderCustom-page {
  height: 100%;
  min-width: 50px;
  max-width: 230px;
  .siderCustom-component {
    height: calc(~"100% - 64px");
    position: absolute;
    z-index: 11;
    width: 230px !important;
    flex: 0 0 230px !important;
    max-width: 230px !important;
    background: rgba(4, 21, 39, 1) !important;
    .sider-header {
      padding-top: 5px;
      height: 54px;
      border-bottom: 1px solid #666;

      .app-right-arrow {
        line-height: 44px !important;
        .anticon-right {
          float: right;
          margin-right: 0;
          margin-top: 14px;
          svg {
            width: 15px !important;
            height: 15px !important;
          }
        }
      }

      .ant-menu-item {
        height: 44px;
        line-height: 44px;
        color: #fff;
        opacity: 1;

        &:hover {
          background: #3f90f7;
        }
        &.ant-menu-item-active {
          .nav-text {
            color: #fff !important;
          }
        }
      }
    }
    &.ant-layout-sider-collapsed {
      flex: 0 0 50px !important;
      width: 50px !important;
      min-width: 50px !important;
    }
  }
  .ant-menu {
    background: rgba(4, 21, 39, 1) !important;
    border-right: 0 !important;
    .ant-menu-item {
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      padding: 0 15px !important;
      margin: 0;
      opacity: 0.7;
      &:hover {
        background: #234165;
        opacity: 1;
      }
      .anticon {
        vertical-align: -6px;
        svg {
          width: 20px;
          height: 20px;
        }
      }
      &.ant-menu-item-active {
        .nav-text {
          color: #3f90f7 !important;
        }
      }
      &.ant-menu-item-selected {
        background: #3f90f7;
        opacity: 1;
        .nav-text {
          color: #fff !important;
        }
      }
      .nav-text {
        font-size: 14px;
      }
    }
    &.ant-menu-inline-collapsed {
      width: 50px !important;
    }
  }

  .indexMaskComponent-container {
    width: 680px;
    box-shadow: 0px 3px 34px 0px rgba(197, 197, 197, 0.46);
    height: min-content;
    margin-top: 17px;
    position: fixed;
    left: 230px;
    top: 48px;
    z-index: 10;
    ul {
      padding-top: 20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 100%;
      background: rgba(255, 255, 255, 1);
      li {
        padding-top: 20px;
        .left {
          width: 150px;
          text-align: center;
          margin-top: -7px;
          position: relative;
          span {
            height: 16px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(38, 38, 38, 1);
            line-height: 34px;
          }
          .anticon {
            position: absolute;
            right: 20px;
            top: 13px;
            svg {
              width: 10px;
              height: 10px;
            }
          }
        }
        .line {
          width: 1px;
          height: 14px;
          border: 1px solid rgba(204, 204, 204, 1);
          margin-top: 3px;
        }
        .right {
          overflow: hidden;
          span {
            width: 130px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(86, 86, 86, 1);
            float: left;
            padding-bottom: 20px;
          }
          span.active {
            color: rgba(63, 144, 247, 1);
          }
        }
      }
    }
  }
}
